import anime from 'animejs'

// 需要从下而上的元素需要隐藏  opacity-0

export default function (app) {
  app.directive('fadeIn', {
    created(el, bindings) {
      anime({
        targets: el.children, // 给谁设置动画  也可以是'.th-list-show .th-content ul li'
        opacity: [0, 1],
        duration: 400,
        easing: 'spring(1, 80, 10, 0)',
        delay: anime.stagger(400, { start: 300 }), // 延迟300ms后 每个元素依次400ms出现动画，
        translateY: [anime.stagger(bindings.value?.stagger ?? [40, 10]), 0], // 从下到上，h1是从40px往上出现  h3是25px button 是10px出现
      })
    },
  })
}

/*
单文件中应用    实现轮播图中标题文字自下而上动画

import anime from 'animejs'

// 入场动画
const listAnimate = () => {
  anime({
    targets: '.animeClass', // 给谁设置动画  也可以是'.th-list-show .th-content ul li'或者获取到的dom元素
    opacity: [0, 1],
    duration: 400,
    easing: 'spring(1, 80, 10, 0)',
    delay: anime.stagger(400, { start: 300 }), // 延迟300ms后 每个元素依次400ms出现动画，
    translateY: [anime.stagger([40, 10]), 0], // 从下到上，h1是从40px往上出现  h3是25px button 是10px出现
  })
}

post().then(()=>{
    listAnimate()
})

*/
